<script setup>
import SysMenuTreeSelect from "@/views/sys/menu/components/sys-menu-tree-select.vue";
import { FORM_MODE, MENU_TYPE } from "@/common/index.js";

const data = defineModel();
const visible = defineModel("visible", { type: Boolean });

const props = defineProps({
  mode: {
    type: String,
    default: FORM_MODE.DETAIL
  }
});
const emits = defineEmits(["submit"]);

const onMenuTypeChange = value => {
  if (value === MENU_TYPE.MENU) {
    data.value.frameSrc = undefined;
    data.value.buttonList = [
      {
        name: undefined,
        permission: undefined
      }
    ];
  }
  if (value === MENU_TYPE.IFRAME) {
    data.value.component = undefined;
    data.value.buttonList = [];
  }
  if (value === MENU_TYPE.LINK) {
    data.value.component = undefined;
    data.value.frameSrc = undefined;
    data.value.buttonList = [];
  }
};

const onButtonAdd = () => {
  data.value.buttonList.push({
    name: undefined,
    permission: undefined,
    rank: 1
  });
};

const removeButtons = index => {
  data.value.buttonList.splice(index, 1);
};

const submitForm = () => {
  emits("submit", data.value);
};
</script>

<template>
  <el-drawer size="50%" v-model="visible" title="详情">
    <el-form>
      <el-row :gutter="20" class="w-full">
        <el-col :span="12">
          <el-form-item label="菜单类型" label-width="90">
            <el-radio-group :disabled="props.mode === FORM_MODE.DETAIL" v-model="data.menuType"
                            @change="onMenuTypeChange">
              <el-radio-button label="菜单" :value="MENU_TYPE.MENU" />
              <el-radio-button label="Iframe" :value="MENU_TYPE.IFRAME" />
              <el-radio-button label="外链" :value="MENU_TYPE.LINK" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="上级菜单">
            <sys-menu-tree-select :disabled="props.mode === FORM_MODE.DETAIL" v-model="data.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="菜单名称" prop="title">
            <el-input v-model="data.title" :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="路由名称" prop="name">
            <el-input v-model="data.name" :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="菜单路径" prop="path">
            <el-input v-model="data.path" :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="data.menuType === MENU_TYPE.MENU">
          <el-form-item label-width="90" label="组件路径" prop="component">
            <el-input v-model="data.component"
                      :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="菜单排序" prop="rank">
            <el-input-number style="width: 100%;" :step="1" controls-position="right" :precision="0" v-model="data.rank"
                             :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="data.menuType === MENU_TYPE.MENU">
          <el-form-item label-width="90" label="路由重定向" prop="redirect">
            <el-input v-model="data.redirect"
                      :disabled="props.mode === FORM_MODE.DETAIL || data.menuType !== MENU_TYPE.MENU" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="菜单图标" prop="icon">
            <el-input v-model="data.icon" :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="拓展图标" prop="extraIcon">
            <el-input v-model="data.extraIcon" :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label-width="90" label="进场动画" prop="enterTransition">
            <el-input v-model="data.enterTransition" :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="离场动画" prop="extraIcon">
            <el-input v-model="data.leaveTransition" :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="data.menuType === MENU_TYPE.IFRAME">
          <el-form-item label-width="90" label="链接" prop="extraIcon">
            <el-input v-model="data.frameSrc"
                      :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>

        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="菜单激活" prop="activePath">
            <el-input v-model="data.activePath" :disabled="props.mode === FORM_MODE.DETAIL" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="菜单" prop="extraIcon">
            <el-radio-group :disabled="props.mode === FORM_MODE.DETAIL" v-model="data.showLink">
              <el-radio-button label="显示" :value="1" />
              <el-radio-button label="隐藏" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="父级菜单" prop="showParent">
            <el-radio-group :disabled="props.mode === FORM_MODE.DETAIL" v-model="data.showParent">
              <el-radio-button label="显示" :value="1" />
              <el-radio-button label="隐藏" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="缓存页面" prop="keepAlive">
            <el-radio-group :disabled="props.mode === FORM_MODE.DETAIL" v-model="data.keepAlive">
              <el-radio-button label="缓存" :value="1" />
              <el-radio-button label="不缓存" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="标签页" prop="showParent">
            <el-radio-group :disabled="props.mode === FORM_MODE.DETAIL" v-model="data.hiddenTag">
              <el-radio-button label="允许" :value="0" />
              <el-radio-button label="禁止" :value="1" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="90" label="固定标签页" prop="fixedTag">
            <el-radio-group :disabled="props.mode === FORM_MODE.DETAIL" v-model="data.fixedTag">
              <el-radio-button label="固定" :value="1" />
              <el-radio-button label="不固定" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div v-if="data.menuType === MENU_TYPE.MENU">
      <el-form>
        <el-form-item v-if="[FORM_MODE.CREATE, FORM_MODE.MODIFY].includes(props.mode)">
          <el-button type="primary" size="small" @click="onButtonAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="data.buttonList" border>
        <el-table-column prop="name" label="按钮名称" align="center">
          <template #default="{ row }">
            <span v-if="props.mode === FORM_MODE.DETAIL">{{ row.name }}</span>
            <el-input v-else v-model="row.name" />
          </template>
        </el-table-column>
        <el-table-column prop="permission" label="权限标识" align="center">
          <template #default="{ row }">
            <span v-if="props.mode === FORM_MODE.DETAIL">{{ row.permission }}</span>
            <el-input v-else v-model="row.permission" />
          </template>
        </el-table-column>
        <el-table-column width="60" label="操作" align="center" v-if="props.mode !== FORM_MODE.DETAIL">
          <template #default="{ $index }">
            <el-link type="danger" @click="removeButtons($index)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-space>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">

</style>
